<template>
  <div>
    <!-- 页面头部 黑马优购-->
    <van-nav-bar title="黑马优购" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <!-- <my-cate
      :title="title"
      left-text="返回"
      :right-text="rightText"
      :url="url"
      @onClickLeft="onClickLeft"
      @onClickRight="onClickRight"
    ></my-cate> -->
    <div class="fatherBox">
    <div class="box">
      <van-row v-if="list.length === 0 || list.length === null">
        <van-button type="info" @click="goAddress">+选择收货地址</van-button>
      </van-row>
      <van-row v-else>
        <div @click="goAddressList">
          <div class="message">
            <span class="a">收货姓名：{{name}}</span>
            <span>联系电话：{{tel}}</span>
            <span id="b">></span>
          </div>
          <div class="message">收货地址：{{address}}</div>
        </div>
      </van-row>
    </div>
    <van-card
      v-for="(item,index) in newList"
      :key="index"
      :num="item.goods_number"
      :price="item.goods_price"
      :title="item.goods_name"
      :thumb="item.goods_small_logo"
    />
    </div>
    <van-tabbar fixed>
    <van-button type="primary" size="large" >立即下单</van-button>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      title: '黑马优购',
      rightText: '',
      url: '黑马优购',
      list: [],
      name: '',
      tel: '',
      address: '',
      newList:[]
    }
  },
  created() {
    this.getList()
    this.$store.commit("setIfShow", false);  
    if(localStorage.getItem('list') === null ){
      return
    } else {
      this.list = localStorage.getItem('list')
      if (this.list.length === 2) {
        return
      } else {
        this.changeAddress()
      }
    }
  },
  components: {
  },
  methods: {
    onClickLeft() {
      this.$router.push("/cars");
    },
    onClickRight() {},
    goAddress() {
      // const list = localStorage.getItem('list')
      this.$router.push('/addresslist')
    },
    changeAddress() {
      const dataList = JSON.parse(localStorage.getItem('list'))
      const newList = dataList.find(x => {
        return x.isDefault === true
      })
      this.name = newList.name
      this.tel = newList.tel
      this.address = newList.address.splice('0', 4).join('')
    },
    goAddressList() {
      this.$router.push('/addresslist')
    },
    getList(){
      this.newList = this.goodsList.filter(x =>x.is_promote ===true )
    }
  },
  computed: {
    ...mapState(['goodsList'])
  }
}
</script>
<style lang="less" scoped>
.van-contact-card {
  margin-top: 50px;
}
.van-button--large {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.van-hairline--top-bottom .van-tabbar .van-tabbar--fixed {
  display: none;
}
.box::before {
  position: absolute;
  right: 0;
  top: 125px;
  left: 0;
  height: 3px;
  background: repeating-linear-gradient(
    -45deg,
    #ff6c6c 0,
    #ff6c6c 20%,
    transparent 0,
    transparent 25%,
    #1989fa 0,
    #1989fa 45%,
    transparent 0,
    transparent 50%
  );
  background-size: 80px;
  content: '';
}
.box {
  position: relative;
  margin-bottom: 23px;
  padding-top: 60px;
  line-height: 25px;
}
.van-card__price-currency {
  color: red;
  font-size: 16px;
}
.van-card__price-integer {
  color: red;
}
.van-button--normal {
  position: relative;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  //   margin-top: 20px;
}
.a {
  margin-right: 20px;
}
.message {
  margin-left: 15px;
  font-size: 14px;
}
#b {
  font-size: 25px;
  position: absolute;
  top: 72px;
  right: 4px;
}
.fatherBox {
  margin-bottom: 50px;
}
</style>